<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>未来家园主题乐园</title>
		<link rel="stylesheet" href="./src/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./src/lib/css/reset.css" />
		<link rel="stylesheet" href="./src/css/header.min.css" />
		<link rel="stylesheet" href="./src/lib/video/video-js.min.css" />
		<link rel="stylesheet" href="./src/css/home.min.css" />
		<!-- bootstrap 图标库cdn -->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
		/>
	</head>
	<body>
		<header id="header"></header>
		<div id="banner">
			<video
				id="example_video"
				playsinline
				class="video-js vjs-default-skin vjs-big-play-centered"
				webkit-playsinline="true"
				playsinline="true"
				x-webkit-airplay="true"
				x5-video-player-type="h5"
				x5-video-player-fullscreen="true"
				x5-video-ignore-metadata="true"
			>
				<p class="vjs-no-js">您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p>
			</video>
		</div>
		<div id="product">
			<div class="title text-center">
				<h4 class="m-auto d-inline-block">推荐产品</h4>
			</div>
			<div class="container">
				<div class="row">
					<a
						class="col-sm-8 mb-5 position-relative product-item"
						href="./product.html?type=深加工"
					>
						<img
							src="./src/images/product1.png"
							title="蛹虫草制品"
							alt="蛹虫草制品"
							class="w-100"
						/>
						<div class="position-absolute h4 text-white positionlt">
							蛹虫草制品
						</div>
					</a>
					<a
						class="col-sm-4 mb-5 position-relative product-item"
						href="./product.html?type=农产品"
					>
						<img
							src="./src/images/product2.png"
							class="w-100"
							title="采摘园"
							alt="采摘园"
						/>
						<div class="position-absolute h4 text-white positionlt">采摘园</div>
					</a>
				</div>
				<div class="row">
					<a
						class="col-sm-4 mb-5 position-relative product-item"
						href="./product.html?type=农产品"
					>
						<img
							src="./src/images/product3.png"
							title="美人果"
							alt="美人果"
							class="w-100"
						/>
						<div class="position-absolute h4 text-white positionlt">美人果</div>
					</a>
					<a
						class="col-sm-8 mb-5 position-relative product-item"
						href="./product.html?type=服务"
					>
						<img
							src="./src/images/product4.png"
							class="w-100"
							title="演出赛事"
							alt="演出赛事"
						/>
						<div class="position-absolute h4 text-white positionlt">
							演出赛事
						</div>
					</a>
				</div>
				<div class="row">
					<a
						class="col-sm-4 mb-5 position-relative product-item"
						href="./product.html?type=深加工"
					>
						<img
							src="./src/images/product5.png"
							title="精华膜"
							alt="精华膜"
							class="w-100"
						/>
						<div class="position-absolute h4 text-white positionlt">精华膜</div>
					</a>
					<a
						class="col-sm-4 mb-5 position-relative product-item"
						href="./product.html?type=服务"
					>
						<img
							src="./src/images/product6.png"
							class="w-100"
							title="餐饮"
							alt="餐饮"
						/>
						<div class="position-absolute h4 text-white positionlt">餐饮</div>
					</a>
					<a
						class="col-sm-4 mb-5 position-relative product-item"
						href="./product.html?type=服务"
					>
						<img
							src="./src/images/product7.png"
							class="w-100"
							title="住宿"
							alt="住宿"
						/>
						<div class="position-absolute h4 text-white positionlt">住宿</div>
					</a>
				</div>
			</div>
		</div>
		<div id="scenery">
			<a class="position-relative d-block" href="./parkScenery.html">
				<img src="./src/images/scenery.png" class="img-fluid" alt="风景" />
				<div class="content position-absolute text-white">
					<h3>梁子湖畔 打卡胜地</h3>
					<p>乡村振兴践行者 三产融合引领者 健康生活智造者 美丽家园勾绘者</p>
				</div>
			</a>
		</div>
		<div id="news">
			<div class="title text-center">
				<h4 class="m-auto d-inline-block">最新动态</h4>
			</div>
			<div class="container">
				<div class="row">
					<div class="media col-sm-4 mb-5"></div>
					<div class="gardenNews col-sm-4 mb-5"></div>
					<div class="col-sm-4 mb-5 position-relative">
						<div class="position-absolute news-lable1 text-white">园区活动</div>
						<div class="overflow-auto newsBox position-relative">
							<ul class="news-list position-absolute"></ul>
						</div>
					</div>
				</div>
			</div>
			<div class="mb-5">
				<div class="text-center">
					<a class="m-auto d-inline-block more" href="./dynamic.html">
						更多资讯 <i class="bi bi-chevron-right"></i>
					</a>
				</div>
			</div>
		</div>
		<footer id="footer"></footer>
	</body>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="./src/lib/jquery-3.5.1.js"></script>
	<script src="./src/lib/bootstrap/js/bootstrap.min.js"></script>
	<script src="./src/lib/video/video.min.js"></script>
	<script src="./src/js/home.js" type="module"></script>
</html>
